<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8" />
    <title>发布文章</title>
    <link rel="stylesheet" th:href="@{/editor-md/css/style.css}" media="all" />
    <link rel="stylesheet" th:href="@{/editor-md/css/editormd.css}" media="all"  />
    <link rel="shortcut icon" th:href="@{https://pandao.github.io/editor.md/favicon.ico}" type="image/x-icon" media="all"  />
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" th:href="@{/AdminLTE/bootstrap/css/bootstrap.min.css}">
    <!-- layui -->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <!-- 有关面包屑和其它样式 -->
    <link rel="stylesheet" th:href="@{/AdminLTE/dist/css/AdminLTE.min.css}">
    <!-- layui-FromSelects -->
    <link rel="stylesheet" th:href="@{/lib/from-selects/formSelects-v4.css}">
    <!-- editor-jQuery -->
    <script th:src="@{/editor-md/js/jquery.min.js}" type="text/javascript"></script>
    <!-- Bootstrap 3.3.6 -->
    <script th:src="@{/AdminLTE/bootstrap/js/bootstrap.min.js}"></script>
    <!-- layui -->
    <script th:src="@{/layui/layui.js}"></script>
</head>
<body>

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        博客列表
        <small>发布博客</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
        <li> <a href="#"><i class="fa fa-dashboard"></i>博客管理</a></li>
        <li class="active">博客列表</li>
    </ol>
</section>

<!--表单start-->
<form id="AddArticle" style="margin: 20px;">
    <div class="form-group" style="display: none">
        <label>文章ID</label>
        <input type="text" th:name="blogId" th:value="${blogArticle?.blogId}" class="form-control">
    </div>
    <div class="form-group">
        <label>文章标题</label>
        <input type="text" th:name="title" th:value="${blogArticle?.title}" class="form-control" placeholder="请输入文章标题...">
    </div>
    <div class="form-group">
        <label>文章内容</label>
        <div>
            <!--编辑器主题-->
            <div style="text-align: center">
                <small>编辑器主题：</small>
                <select id="editormd-theme-select">
                    <option selected="selected" value="">select Editor.md themes</option>
                </select>
                <select id="editor-area-theme-select">
                    <option selected="selected" value="">select editor area themes</option>
                </select>
                <select id="preview-area-theme-select">
                    <option selected="selected" value="">select preview area themes</option>
                </select>
            </div>
            <!-- 博客内容 -->
            <div id="test-editormd" style="margin-top: 6px;">
                <textarea style="display:none;" th:name="content" th:text="${blogArticle?.content}"></textarea>
            </div>
        </div>
    </div>
    <!--博客内容设置 模态框触发-->
    <div style="text-align: center;">
        <button onclick="window.location.href = '/admin/blog/blogArticle'" type="button" class="layui-btn">返回列表</button>
        <button type="button" style="margin-left: 20px;" class="layui-btn layui-btn-normal" data-toggle="modal" data-target="#SetUpBlogModal">发布文章</button>
    </div>
    <!--文章设置模态框start-->
    <div id="SetUpBlogModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">文章设置</h4>
                </div>
                <div class="modal-body">
                    <!--内容start-->
                    <div class="layui-form layui-form-pane">
                        <div class="layui-form-item">
                            <label class="layui-form-label">文章作者</label>
                            <div class="layui-input-block">
                                <input type="text" th:name="author" th:value="${blogArticle?.author}" required  lay-verify="required" placeholder="请输入文章作者..." autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">文章分类</label>
                            <div class="layui-input-block">
                                <select th:name="type" xm-select="blogType" xm-select-radio="" xm-select-skin="normal" xm-select-search xm-select-search-type="dl" xm-select-direction="auto">
                                    <option th:each="type : ${session.blogTypes}" th:if="${type.typeName} == ${blogArticle?.type}" th:name="${type.typeName}" th:value="${type.typeName}" th:text="${type.typeName}" selected="selected"></option>
                                    <option th:each="type : ${session.blogTypes}" th:if="${type.typeName} != ${blogArticle?.type}" th:name="${type.typeName}" th:value="${type.typeName}" th:text="${type.typeName}"></option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">文章标签</label>
                            <div class="layui-input-block">
                                <select th:name="tags" xm-select="blogTag" xm-select-radio="" xm-select-skin="normal" xm-select-search xm-select-search-type="dl" xm-select-direction="auto">
                                    <option th:each="tag : ${session.blogTags}" th:if="${tag.tagName} == ${blogArticle?.tags}"
                                            th:name="${tag.tagName}" th:value="${tag.tagName}" th:text="${tag.tagName}" selected="selected">
                                    </option>
                                    <option th:each="tag : ${session.blogTags}" th:if="${tag.tagName} != ${blogArticle?.tags}"
                                            th:name="${tag.tagName}" th:value="${tag.tagName}" th:text="${tag.tagName}">
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">封面图片</label>
                            <div class="layui-input-block">
                                <input type="text" class="form-control" th:name="coverImg" th:value="${blogArticle?.coverImg}" placeholder="请输入文章封面图链接...">
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">文章描述</label>
                            <div class="layui-input-block">
                                <textarea th:name="description" th:text="${blogArticle?.description}" placeholder="请输入文章描述..." class="layui-textarea"></textarea>
                            </div>
                        </div>
                    </div>
                    <!--内容end-->


                </div>
                <div class="modal-footer">
                    <button type="button" class="layui-btn" title="返回编辑文章内容" data-dismiss="modal">返回修改</button>
                    <button type="button" class="layui-btn layui-btn-danger" title="修改文章内容" onclick="UpdateBlog()">确认修改</button>
                    <button type="button" class="layui-btn layui-btn-normal" title="发布文章" onclick="AddBlog()">确认发布</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!--文章设置模态框end-->
</form>
<!--表单end-->

<!-- layui-FromSelects -->
<script th:src="@{/lib/from-selects/formSelects-v4.min.js}"></script>

<!--<script th:src="@{/editor-md/js/jquery.min.js}" type="text/javascript"></script>-->
<script th:src="@{/editor-md/js/editormd.min.js}" type="text/javascript"></script>
<script type="text/javascript">
    var testEditor;
    function themeSelect(id, themes, lsKey, callback) {
        var select = $("#" + id);
        for (var i = 0, len = themes.length; i < len; i ++) {
            var theme    = themes[i];
            var selected = (localStorage[lsKey] == theme) ? " selected=\"selected\"" : "";
            select.append("<option value=\"" + theme + "\"" + selected + ">" + theme + "</option>");
        }
        select.bind("change", function(){
            var theme = $(this).val();
            if (theme === ""){
                alert("theme == \"\"");
                return false;
            }
            console.log("lsKey =>", lsKey, theme);
            localStorage[lsKey] = theme;
            callback(select, theme);
        });
        return select;
    }
    $(function() {
        testEditor = editormd("test-editormd", {
            width        : "100%",
            height       : 400,
            // Editor.md theme, default or dark, change at v1.5.0
            // You can also custom css class .editormd-preview-theme-xxxx
            theme        : (localStorage.theme) ? localStorage.theme : "default",
            // Preview container theme, added v1.5.0
            // You can also custom css class .editormd-preview-theme-xxxx
            previewTheme : (localStorage.previewTheme) ? localStorage.previewTheme : "default",
            // Added @v1.5.0 & after version is CodeMirror (editor area) theme
            editorTheme  : (localStorage.editorTheme) ? localStorage.editorTheme : "default",
            path         : '/editor-md/lib/'
        });
        themeSelect("editormd-theme-select", editormd.themes, "theme", function($this, theme) {
            testEditor.setTheme(theme);
        });
        themeSelect("editor-area-theme-select", editormd.editorThemes, "editorTheme", function($this, theme) {
            testEditor.setCodeMirrorTheme(theme);
            // or testEditor.setEditorTheme(theme);
        });
        themeSelect("preview-area-theme-select", editormd.previewThemes, "previewTheme", function($this, theme) {
            testEditor.setPreviewTheme(theme);
        });
    });
</script>

<!--addBlog-->
<script th:src="@{/js/blog/addBlog.js}"></script>
</body>
</html>